<template>
	<div class="pt10 pb20">
		<el-row :gutter="20">
			<el-col :span="16" class="pl30 pr30">
				<div class="pl30 pr30">
					<div class="flex row-between col-center pb25">
						<span class="fb">基本信息</span>
						<span class="cursor color2 fs14">查看详情</span>
					</div>
					<div class="fs14" style="line-height: 45px;">
						<el-row class="border-bottom border-right border-left border-top">
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">客户姓名</el-col>
							<el-col :span="6" class="border-right color2 pl20">{{info1.customerName}}</el-col>
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">客户编号</el-col>
							<el-col :span="10" class="color2 pl20">{{info1.customerCode}}</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">客户类型</el-col>
							<el-col :span="6"
								class="border-right color2 pl20">{{customerTypeProps.customerTypeName}}</el-col>
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">客户来源</el-col>
							<el-col :span="10" class="color2 pl20">{{customerTypeProps.opportunityChannelName}}</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">客户星级</el-col>
							<el-col :span="6" class="border-right color2 pl20">{{info1.customerStarLevel}}星</el-col>
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">来源渠道</el-col>
							<el-col :span="10" class="color2 pl20">{{customerTypeProps.opportunitySourceName}}</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">客户状态</el-col>
							<el-col :span="6"
								class="border-right color2 pl20">{{customerTypeProps.customerStatusName}}</el-col>
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">客户归属</el-col>
							<el-col :span="10" class="color2 pl20">{{info1.businessManagerName}}</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">生日</el-col>
							<el-col :span="6" class="border-right color2 pl20">{{info1.birthday}}</el-col>
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">手机号码</el-col>
							<el-col :span="10" class="color2 pl20">{{info1.phoneNumber}}</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left">
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">年农资投入成本</el-col>
							<el-col :span="6" class="border-right color2 pl20">{{info1.cropCost}}元</el-col>
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">所在地区</el-col>
							<el-col :span="10" class="color2 pl20">{{info1.localArea}}{{info1.detailedAddress}}</el-col>
						</el-row>
						<el-row class="border-bottom border-right border-left"
						v-for="(item,index) in info1.cropStructures" :key="index"
						> 
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">种植作物</el-col>
							<el-col :span="6" class="border-right color2 pl20">{{item.cropVariety}}</el-col>
							<el-col :span="4" class="border-right text-center bg-F5F7FA fb">种植面积</el-col>
							<el-col :span="10" class="color2 pl20">{{item.cropArea}}亩</el-col>
						</el-row>
					</div>
				</div>

				<div class="pl30 pr30 mt30 pb30">
					<div class="pb25 text-center">
						<span class="fb">相关数据</span>
					</div>
					<el-row :gutter="20">
						<el-col :span="6">
							<div class="flex col-top fs14 record">
								<img class="img" src="@/assets/images/start1.png" alt="" />
								<div class="ml8">
									<span class="fb ">跟进记录</span>
									<div class="main-color mt10 fb">
										{{info1.followUpRecordNumber}}条
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="flex col-top fs14 record">
								<img class="img" src="@/assets/images/start1.png" alt="" />
								<div class="ml8">
									<span class="fb ">订单记录</span>
									<div class="main-color mt10 fb">
										{{info1.orderRecordNumber}}条
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="flex col-top fs14 record">
								<img class="img" src="@/assets/images/start1.png" alt="" />
								<div class="ml8">
									<span class="fb ">归属记录</span>
									<div class="main-color mt10 fb">
										{{info1.belongToNumber}}条
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="flex col-top fs14 record">
								<img class="img" src="@/assets/images/start1.png" alt="" />
								<div class="ml8">
									<span class="fb ">操作日志</span>
									<div class="main-color mt10 fb">
										{{info1.opeLogNumber}}条
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="pr30">
					<div class="flex col-center row-between ">
						<span>客户动态</span>
						<div class="flex col-center">
							<div class="flex col-center mr20 fs14 color2">
								<img style="width: 14px;" class="cursor" @click="isFollowUp(0)"
									v-if="queryParams.isFollowUp === ''" src="@/assets/images/radio.png" alt="" />
								<img style="width: 14px;" class="cursor" @click="isFollowUp('')" v-else
									src="@/assets/images/select.png" alt="" />
								<span class="ml5">只看跟进</span>
							</div>
							<el-button type="operate" style="width: 70px;height: 32px;" @click="open()">写跟进</el-button>
						</div>
					</div>
					<div class="mt20">
						<el-timeline v-if="list.length > 0" style="max-width: 600px">
							<el-timeline-item v-for="(item,i) in list" :key="i" :timestamp="item.createTime" placement="top">
								<template #dot>
									<img class="bgWhite ml4" style="width: 9px;" src="@/assets/images/circle.png"
										alt="">
								</template>
								<el-card shadow="never" body-class="card">
									<div class="flex col-center row-between">
										<span class="fb">{{item.businessName}} {{item.title}}</span>
										<span class="color2 fs12">{{item.createTime}}</span>
									</div>
									<p class="color2 fs12">{{item.content}}</p>
									<div class="flex col-end row-between">
										<span class="fs12">来自客户：{{item.createName}}</span>
										<el-button v-if="item.otherRecordId"
											style="width: 60px;height: 30px;color: #677585;"
											@click="detailDialogFunc(item)">详情</el-button>
									</div>
								</el-card>
							</el-timeline-item>
						</el-timeline>
						<div v-else>
							<el-empty description="暂无数据"></el-empty>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
			@pagination="customerDynamicList" />
		<!-- 新建跟进 -->
		<el-dialog v-model="centerDialogVisible" title="新建跟进" width="716" align-center center>
			<div class="pt20">
				<el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="80px">
					<el-form-item label="跟进类型" prop="followupType" style=" margin-right: 20px;">
						<el-select v-model="form.followupType" placeholder="请选择" size="large" style="width: 240px;">
							<el-option v-for="dict in bus_followup_type" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="跟进日期" prop="followupTime" style="margin-right: 0;" label-width="92">
						<el-date-picker v-model="form.followupTime" type="date" placeholder="请选择" size="large"
							style="width: 240px;" @change="change1" />
					</el-form-item>
					<!-- <div class="radius8" style="padding:5px;background-color:#F7F8FA ;width: 670px;margin: 0 auto 20px;">
						<el-input
							v-model="form.remark"
							style="width: 650px;box-shadow: none;"
							:rows="4"
							type="textarea"
							placeholder="请输入备注信息"
							 resize="none"
							:input-style="{background:'#F7F8FA',borderRaduis:'5px',boxShadow:'none'}"
							maxlength="300"
							show-word-limit
						  />
					</div> -->
					
					<el-form-item label="客户姓名" prop="customerId" >
						<el-select style="width: 240px;" v-model="form.customerId" 
						v-if="form.customerId == ''"
						filterable remote reserve-keyword
							:remote-method="customerLists" :loading="loadings" size="large" placeholder="请输入">
							<el-option v-for="item in options" :key="item.id" :label="item.customerName"
								:value="item.id" />
						</el-select>
						<el-input
							v-else
							size="large"
							disabled
							v-model="info1.customerName"
							style="width:240px;"
							type="text"
							placeholder="请输入备注信息"
						  />
					</el-form-item>

					<el-form-item label="客户状态" prop="customerStatus" style="margin-right:0;">
						<el-select style="width: 240px;" v-model="form.customerStatus" placeholder="请选择" size="large">
							<el-option v-for="dict in bus_customer_status" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>

					<!-- <el-form-item label="联系人" prop="customerStatus" style="margin-right: 0;">
						<el-select style="width: 140px;" v-model="form.nextStaffId" placeholder="联系人" size="large">
							<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
								:value="dict.userId" />
						</el-select>
					</el-form-item> -->
					<el-col :span="24" v-for="(item,index) in bus_followup_field_management" :key="index">
						<el-form-item :label="item.label" prop="time">
							<el-input v-model="item.content" size="large" placeholder="请输入" style="width: 596px;" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="水印照片" prop="customerStatus" style="width: 570px;">
							 <el-upload
								name="file"
								class="avatar-uploader"
								:action="url"
								:headers="headers"
								:show-file-list="false"
								:on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload"
							  >
								<img v-if="form.photoUrl" :src="form.photoUrl" style="width: 110px;height: 110px;" />
								<div v-else>
									<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
									<div class="fs12">上传图片</div>
								</div>
							  </el-upload>
						</el-form-item>
					</el-col>
					<div class="fb fs16 mt10 color333 mb20" style="padding-left: 11px;">创建下次跟进任务</div>
					<el-form-item label="跟进时间" prop="nextFollowupTime">
						<el-date-picker v-model="form.nextFollowupTime" type="datetime" placeholder="请选择" size="large"
							style="width: 240px;" @change="change2" />
					</el-form-item>
					<el-form-item label="跟进内容" prop="nextFollowupContent" style="margin-right: 0;">
						<el-input v-model="form.nextFollowupContent" size="large" placeholder="请输入"
							style="width: 240px" />
					</el-form-item>
					<el-form-item label="跟进人员" prop="nextStaffId">
						<el-select v-model="form.nextStaffId" placeholder="客户类型" size="large" style="width: 240px">
							<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
								:value="dict.userId" />
						</el-select>
					</el-form-item>
					<el-form-item label="跟进提醒" prop="nextSreminderType" style="margin-right: 0;">
						<el-select v-model="form.nextSreminderType" placeholder="请选择" size="large"
							style="width: 240px;">
							<el-option v-for="dict in bus_followup_task" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="提醒方式" prop="nextSeminderMethod">
						<el-radio-group v-model="form.nextSeminderMethod" style="width: 340px">
							<el-radio v-for="dict in bus_reminder_method" :key="dict.value" :label="dict.value"
								:value="dict.value" size="large">
								{{dict.label}}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer text-right">
					<el-button class="cancelSubBtn" @click="centerDialogVisible = false">取消</el-button>
					<el-button type="primary" class="mainSubBtn" @click="submit('form')">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
		<detailDialog ref="dialog" :message="followMessage" @edit="edit"></detailDialog>
		<!-- 添加跟进 -->
		<addDialog ref="dialog2" :customerId="customerTypeProps.userId" @recordList="recordList"></addDialog>
	</div>
</template>

<script>
	import { getToken } from "@/utils/auth";
	import {
		overViewInfo,
		customerDynamicList,
		customerList
	} from '@/api/business/customer'
	import {
		addRecord,
		followupDetail
	} from '@/api/business/followup'
	import {
		getUserInfo
	} from '@/utils/ruoyi'
	import {
		getUserListData
	} from "@/api/business/teamOpportunity";
	import detailDialog from '../../../components/detail.vue' //详情
	import addDialog from '../../../components/checkIn.vue' //添加跟进
	export default {
		components: {
			detailDialog,
			addDialog
		},
		props: {
			customerTypeProps: {
				type: Object,
				default: {}
			},
			customerTypeName: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				url:import.meta.env.VITE_APP_BASE_API + "/common/upload",
				headers: {
					Authorization: 'Bearer ' + getToken() // 这里的getToken方法需要你自己实现，用于获取你的Token
				},
				bus_followup_task: this.useDict("bus_followup_task").bus_followup_task,
				bus_task_status: this.useDict("bus_task_status").bus_task_status,
				bus_customer_status: this.useDict("bus_customer_status").bus_customer_status,
				bus_reminder_method: this.useDict("bus_reminder_method").bus_reminder_method,
				bus_followup_type: this.useDict("bus_followup_type").bus_followup_type,
				bus_followup_field_management: this.useDict('bus_followup_field_management').bus_followup_field_management,
				img0: '@/assets/images/radio.png',
				img1: '@/assets/images/select.png',
				centerDialogVisible: false,
				isRead: true,
				form: {
					followupTime: '', //跟进时间
					followupType: '', //跟进类型
					customerId: '', //客户id
					customerStatus: '', //客户状态
					dynamicData: '', //动态数据
					photoUrl:'',
					nextFollowupRecord: {
						followupTime: '', //跟进时间
						followupContent: '', //跟进内容
						staffId: '', //跟进人员
						reminderMethod: '', //提醒方式
						reminderType: '', //任务提醒
					}, //跟进任务
					nextFollowupTime: '',
					nextFollowupContent: '', //跟进内容
					nextStaffId: '', //跟进人员
					nextReminderMethod: '', //提醒方式
					nextReminderType: '', //任务提醒
				},
				rules: {
					customerId: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}, ],
					customerStatus: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}, ],
					nextFollowupTime: [{
						required: true,
						message: "不能为空",
						trigger: "change"
					}, ],
					nextStaffId: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}, ], //跟进人员
				},
				info1: {},
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					id: this.customerTypeProps.userId,
					isFollowUp: '', //0只看跟进
				},
				list: [],
				total: '',
				teamOptions: '',
				options: [],
				loadings: false,
				followMessage: {}, //跟进详情
				message: '',
				otherRecordId: ''
			}
		},
		created() {
			this.overViewInfo()
			this.getUserList()
		},
		methods: {
			handleAvatarSuccess(e){
				console.log(e,'e1')
				this.form.photoUrl = e.url
			},
			beforeAvatarUpload(e){
				console.log(e,'e2=======')
				// return false
			},
			edit(e) {
				this.$refs.dialog2.open(e)
			},
			recordList() {
				setTimeout(() => {
					this.customerDynamicList()
					this.followupDetail(this.otherRecordId)
				}, 200)
			},
			/**
			 * 获取本人和下级用户数据
			 */
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
				});
			},
			customerLists(query) {
				if (query !== '') {
					this.loadings = true;
					setTimeout(() => {
						this.loadings = false;
						let data = {
							keyWords: query
						}
						customerList(data).then(response => {
							this.options = response.rows;
						});
					}, 200);
				} else {
					this.options = [];
				}
			},
			overViewInfo() {
				overViewInfo(this.customerTypeProps.userId).then(res => {
					this.info1 = res.data
					console.log(this.info1,'ppppppppppp')
				})
				this.customerDynamicList()
			},
			isFollowUp(num) {
				this.queryParams.isFollowUp = num
				this.queryParams.queryParams = 1
				this.customerDynamicList()
			},
			// 动态
			customerDynamicList() {
				customerDynamicList(this.queryParams).then(res => {
					this.list = res.rows
					console.log(this.list, 'this.list')
					this.total = res.total
				})
			},
			// 写跟进弹框
			open() {
				this.form.customerId = this.info1.id
				this.form.customerStatus = this.info1.customerStatus
				this.centerDialogVisible = true
			},
			// 删除跟进
			del() {

			},
			// 跟进详情
			detailDialogFunc(item) {
				this.otherRecordId = item.otherRecordId
				if (item.otherRecordId) {
					this.followupDetail(this.otherRecordId)
				}
			},
			followupDetail(id) {
				followupDetail(id).then(res => {
					this.followMessage = res.data
					for (let i in this.bus_followup_type) {
						if (this.followMessage.followupType == this.bus_followup_type[i].value) {
							this.followMessage.followupTypeName = this.bus_followup_type[i].label
						}
					}
					for (let i in this.bus_customer_status) {
						if (this.followMessage.customerStatus == this.bus_customer_status[i].value) {
							this.followMessage.customerStatusName = this.bus_customer_status[i].label
						}
					}
					this.$refs.dialog.open()
				})
			},
			change1(e) {
				this.form.followupTime = this.filterTime(e)
			},
			change2(e) {
				this.form.nextFollowupRecord.followupTime = this.filterTime(e)
				this.form.nextFollowupTime = this.filterTime(e)
			},
			filterTime(dateString) {
				// 使用 Date.parse 解析字符串为时间戳（毫秒），然后创建 Date 对象
				const date = new Date(Date.parse(dateString));

				// 提取各个部分
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1，并补零
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');

				// 拼接成所需的格式
				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

				return formattedDate
			},
			// 添加跟进
			submit(formName) {
				let arr1 = this.bus_followup_field_management
				let item
				for(let key in arr1){
					let content = arr1[key].content ? arr1[key].content : ''
					item = '[{\"code\":\"'+arr1[0].value+'\",\"content\":\"'+(arr1[0].content ? arr1[0].content : '')+'\"},{\"code\":\"'+arr1[1].value+'\",\"content\":\"'+(arr1[1].content ? arr1[1].content : '')+'\"},{\"code\":\"'+arr1[2].value+'\",\"content\":\"'+(arr1[2].content ? arr1[2].content : '')+'\"},{\"code\":\"'+arr1[3].value+'\",\"content\":\"'+(arr1[3].content ? arr1[3].content : '')+'\"}]'
				}
				this.form.dynamicData = item
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.form.nextFollowupRecord.followupTime = this.form.nextFollowupTime
						this.form.nextFollowupRecord.followupContent = this.form.nextFollowupContent
						this.form.nextFollowupRecord.staffId = this.form.nextStaffId
						this.form.nextFollowupRecord.reminderMethod = this.form.nextReminderMethod //提醒方式
						this.form.nextFollowupRecord.reminderType = this.form.nextReminderType //任务提醒
						// if(this.type == 1){
						addRecord(this.form).then(response => {
							this.$message({
								message: '添加成功',
								type: 'success'
							});
							this.centerDialogVisible = false
						})
						// }else{
						// 	editRecord(this.form).then(response=>{
						// 		this.$message({
						// 		  message: '修改成功',
						// 		  type: 'success'
						// 		});
						// 		this.close()
						// 	})
						// }

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style>
	.record {
		background-color: #F5FAFB;
		border-radius: 8px;
		padding: 20px;
	}

	.img {
		width: 12px;
		height: 16px;
		margin-top: 2px;
	}

	.card {
		border-radius: 6px;
		background: #F7F8FA;
	}
	.el-textarea .el-input__count{
		background: none;
	}
</style>